<!-- 物料锁定记录 -->
<template>
  <basic-container>
    <avue-crud
      ref="crud"
      v-model="form"
      :option="option"
      :table-loading="loading"
      :data="data"
      :page.sync="page"
      :permission="permissionList"
      @search-change="searchChange"
      @search-reset="searchReset"
      @current-change="currentChange"
      @size-change="sizeChange"
      @refresh-change="refreshChange"
      @on-load="onLoad"
    >
      <template slot-scope="{ row, index }" slot="menu">
        <el-button icon="el-icon-view" size="small" type="text" @click="handleView(row, index)">查看</el-button>
      </template>
      <template slot-scope="{ row }" slot="operationReason">
        <span v-if="row.operationType == 'LOCK'">锁定原因:{{ row.operationReason }}</span>
        <span v-if="row.operationType == 'UNLOCK'">解锁说明:{{ row.operationReason }}</span>
      </template>
    </avue-crud>

    <!-- 详情 -->
    <el-dialog
      v-if="detailDialog.show"
      :close-on-click-modal="false"
      :title="detailDialog.title"
      :visible.sync="detailDialog.show"
      custom-class="materialUnlockDialog"
      append-to-body
      width="50%"
      top="15vh"
    >
      <div v-loading="detailDialog.loading">
        <avue-form v-if="detailDialog.form.operationType == 'UNLOCK'" v-model="detailDialog.form" :option="detailDialog.option"> </avue-form>
        <avue-form v-if="detailDialog.form.operationType == 'LOCK'" v-model="detailDialog.form" :option="detailDialog.lockOption"> </avue-form>
      </div>
      <div slot="footer" class="avue-dialog__footer">
        <el-button size="small" icon="el-icon-circle-close" @click="detailDialog.show = false">取消</el-button>
      </div>
    </el-dialog>
  </basic-container>
</template>
<script>
import { getList, getDetail } from '@/api/quality/materialLockRecords';
import { mapGetters } from 'vuex';
export default {
  name: 'MaterialLockRecords',
  data() {
    return {
      option: {
        height: 'calc(100vh - 380px)',
        calcHeight: 30,
        searchShow: true,
        searchSpan: 5,
        searchMenuSpan: 5,
        border: true,
        index: true,
        selection: false,
        dialogClickModal: false,
        addBtn: false,
        viewBtn: false,
        editBtn: false,
        delBtn: false,
        tip: false,
        indexLabel: '序号',
        dialogWidth: '50%',
        menuWidth: 100,
        labelWidth: 100,
        column: [
          {
            label: '操作时间',
            prop: 'lockedTimes',
            hide: true,
            searchSpan: 7,
            searchType: 'datetimerange',
            search: true,
            searchOrder: 1,
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间',
            display: false,
            defaultTime: ['00:00:00', '23:59:59']
          },
          {
            label: '操作类型',
            prop: 'operationType',
            search: true,
            width: 80,
            searchOrder: 5,
            type: 'select',
            dicData: [
              {
                label: '锁定',
                value: 'LOCK'
              },
              {
                label: '解锁',
                value: 'UNLOCK'
              }
            ],
            display: false
          },
          {
            label: '物料编码',
            prop: 'partNo',
            search: true,
            searchSpan: 6,
            searchOrder: 2,
            overHidden: true,
            display: false
          },
          {
            label: '物料名称',
            prop: 'partName',
            overHidden: true,
            display: false
          },
          {
            label: '锁定原因/解锁说明',
            prop: 'operationReason',
            overHidden: true,
            display: false
          },
          {
            label: '物料规格',
            prop: 'partSpec',
            hide: true,
            search: true,
            searchSpan: 6,
            searchOrder: 3,
            overHidden: true,
            display: false
          },
          {
            label: '品牌',
            prop: 'partBrand',
            search: true,
            searchSpan: 7,
            hide: true,
            display: false
          },
          {
            label: '操作人',
            prop: 'operationByName',
            display: false
          },
          {
            label: '操作时间',
            prop: 'operationTime',
            type: 'date',
            width: 150,
            format: 'yyyy-MM-dd HH:mm:ss',
            valueFormat: 'yyyy-MM-dd HH:mm:ss',
            startPlaceholder: '开始时间',
            endPlaceholder: '结束时间',
            display: false
          }
        ]
      },
      detailDialog: {
        show: false,
        loading: false,
        title: '解除详情',
        form: {
          unlockReason: ''
        },
        option: {
          labelWidth: '100',
          submitBtn: false,
          emptyBtn: false,
          menuPosition: 'right',
          detail: true,
          group: [
            {
              label: '锁定信息',
              prop: 'selectInfo',
              arrow: false,
              icon: 'el-icon-vertical-bar',
              column: [
                {
                  label: '物料编码',
                  prop: 'partNo',
                  span: 12
                },
                {
                  label: '物料名称',
                  prop: 'partName',
                  span: 12
                },
                {
                  label: '物料规格',
                  prop: 'partSpec',
                  span: 12
                },
                {
                  label: '锁定维度',
                  prop: 'operationDimension',
                  type: 'select',
                  dicData: [
                    {
                      label: '物料',
                      value: 'MATERIAL'
                    },
                    {
                      label: '品牌',
                      value: 'BRAND'
                    }
                  ],
                  span: 12,
                  control: (val, form) => {
                    if (val === 'MATERIAL') {
                      return {
                        operationContent: {
                          display: false
                        }
                      };
                    } else if (val === 'BRAND') {
                      return {
                        operationContent: {
                          display: true
                        }
                      };
                    }
                  }
                },
                {
                  label: '已锁定品牌',
                  prop: 'operationContent',
                  span: 24
                },
                {
                  label: '锁定原因',
                  prop: 'lockReason',
                  type: 'textarea',
                  row: true,
                  span: 24,
                  maxRows: 3,
                  minRows: 3
                }
              ]
            },
            {
              label: '解除锁定',
              prop: 'lock',
              arrow: false,
              icon: 'el-icon-vertical-bar',
              column: [
                {
                  label: '解锁说明',
                  prop: 'operationReason',
                  span: 24,
                  type: 'textarea',
                  showWordLimit: true,
                  maxlength: 200
                }
              ]
            }
          ]
        },
        lockOption: {
          labelWidth: '100',
          submitBtn: false,
          emptyBtn: false,
          menuPosition: 'right',
          detail: true,
          group: [
            {
              label: '物料信息',
              prop: 'partInfo',
              arrow: false,
              icon: 'el-icon-vertical-bar',
              column: [
                {
                  label: '物料编码',
                  prop: 'partNo'
                },
                {
                  label: '物料名称',
                  prop: 'partName'
                },
                {
                  label: '物料规格',
                  prop: 'partSpec'
                }
              ]
            },
            {
              label: '锁定维度',
              prop: 'operationDimension',
              arrow: false,
              icon: 'el-icon-vertical-bar',
              column: [
                {
                  label: '维度',
                  prop: 'operationDimension',
                  type: 'radio',
                  span: 24,
                  dicData: [
                    {
                      label: '物料',
                      value: 'MATERIAL'
                    },
                    {
                      label: '品牌',
                      value: 'BRAND'
                    }
                  ],
                  control: (val, form) => {
                    if (val === 'MATERIAL') {
                      return {
                        operationContent: {
                          display: false
                        }
                      };
                    } else if (val === 'BRAND') {
                      return {
                        operationContent: {
                          display: true
                        }
                      };
                    }
                  }
                },
                {
                  label: '已锁定品牌',
                  prop: 'operationContent',
                  span: 24
                },
                {
                  label: '锁定原因',
                  prop: 'operationReason',
                  type: 'textarea',
                  row: true,
                  span: 24,
                  maxRows: 3,
                  minRows: 3
                }
              ]
            }
          ]
        }
      },
      loading: true,
      data: [],
      page: {
        pageSize: 20,
        currentPage: 1,
        total: 0
      },
      form: {},
      query: {}
    };
  },
  computed: {
    ...mapGetters(['permission']),
    permissionList() {
      return {};
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$structuralSplit();
    });
  },
  methods: {
    handleView(row, index) {
      this.detailDialog.loading = true;
      getDetail(row.id)
        .then((res) => {
          let data = res.data.data;
          // 解锁详情
          if (row.operationType == 'UNLOCK') {
            this.detailDialog.title = '解锁详情';
            this.detailDialog.show = true;
            this.detailDialog.form = structuredClone(data);
          } else if (row.operationType == 'LOCK') {
            this.detailDialog.title = '锁定详情';
            this.detailDialog.show = true;
            this.detailDialog.form = structuredClone(data);
          }
        })
        .finally(() => {
          this.detailDialog.loading = false;
        });
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    searchChange(params, done) {
      if (params.lockedTimes && params.lockedTimes.length > 0) {
        params.startTime = params.lockedTimes[0];
        params.endTime = params.lockedTimes[1];
        delete params.lockedTimes;
      }
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getList(page.currentPage, page.pageSize, Object.assign(params, this.query))
        .then((res) => {
          const data = res.data.data;
          this.page.total = data.total;
          this.data = data.records;
          this.loading = false;
        })
        .finally(() => {
          this.loading = false;
        });
    }
  }
};
</script>
